<!-- 切换菜单项 -->
<template>
  <div id="">
    <ul class="tabUl">
      <li v-for="(tab,index) in tabArr" :key="tab.key"
      :class="{active:idx==index}" @click="setActive(index)">
        {{tab}}
        <em></em>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "",
  props: ['tabArr'],
  data: () => ({
    idx:0,
  }),
  methods: {
    setActive(index) {
      this.idx = index;
      this.$emit('tabEvent',index);
    }
  }
}
</script>
<style lang="scss" scoped>
.tabUl{
  border-bottom: 1px solid $borderColor;
  li{
    display: inline-block;
    padding: 15px 10px;
    font-size: 16px;
    &.active{
      position: relative;
      color: $blueColor;
      em{
        position: absolute;
        bottom: 0;
        left: 35%;
        width: 30%;
        z-index: 1;
        height: 2px;
        background: $blueColor;
      }
    }
  }
}
</style>
